class Btn extends HTMLElement {
  constructor() {
    super();

    const shaDom = this.attachShadow({ mode: "open" });

    // 1. 原生模式写法
    // this.p = this.h("p");
    // this.p.innerText = "web Components";
    // this.p.setAttribute(
    //   "style",
    //   "width:200px; height: 200px; border:1px solid red;"
    // );

    // shaDom.appendChild(this.p);

    // 2. template 模式写法
    this.template = this.h("template");
    this.template.innerHTML = `
      <style>
        div {
          width: 200px;
          height: 200px;
          border: 1px solid red;
        }
      </style>

      <div>大胆一点，多去尝试</div>
    `;

    shaDom.appendChild(this.template.content.cloneNode(true));
  }

  h(el) {
    return document.createElement(el);
  }

  // web Components 组件生命周期：
  connectedCallback() {
    console.log("元素插入");
  }

  disconnectedCallback() {
    console.log("元素断开");
  }

  adoptedCallback() {
    console.log("元素移动");
  }

  attributeChangedCallback() {
    console.log("元素改变");
  }
}

window.customElements.define("wyn-btn", Btn);
